<template>
  <div class="">
    <div v-if="showNavbar" style="position: relative;z-index: 2" :style="{ backgroundColor: color.statusBarHeightColor || '#fff', height: `${pageForm.statusBarHeight}px`, minHeight: `${pageForm.statusBarHeight}px`, maxHeight: `${pageForm.statusBarHeight}px` }"></div>
    <div ref="header" id="header">
      <uv-navbar v-if="showNavbar" leftIconSize="21px" leftIconColor="#0b0b0b" :titleStyle="{fontSize: '16px', lineHeight: '30px'}" :leftText="navbarOption['leftText'] || ''" :safeAreaInsetTop="false" :fixed="false" :border="navbarOption['border'] || false" :autoBack="navbarOption['autoBack'] || true" :bgColor="navbarOption['bgColor'] || 'rgba(255,255,255,1)'" :title="navbarOption['title'] || ''" />
      <slot name="header"></slot>
    </div>
    <div class="element-main" :style="{ height: `calc(100vh - ${ mainHeight + pageForm.statusBarHeight + pageForm.bottom }px)`}" style="overflow-y: hidden;">
      <slot name="main"></slot>
    </div>
    <div ref="footer" id="footer">
      <slot name="footer"></slot>
    </div>
    <div :style="{
        backgroundColor: color.bottomColor || '#fff',
        height: `${pageForm.bottom}px`,
        minHeight: `${pageForm.bottom}px`,
        maxHeight: `${pageForm.bottom}px`,
      }"></div>
  </div>
</template>

<script>
export default {
  props: {
    navbarOption: {
      type: Object,
      default: {},
    },
    color: {
      type: Object,
      default: {},
    },
    showNavbar: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      mainHeight: '',
      pageForm: {},
      timer: null
    }
  },
  mounted() {
    this.pageForm = this.menuButtonInfo()
    this.timer = setInterval(() => {
      this.pageHeightFun()
    }, 10);
    setTimeout(() => {
      clearInterval(this.timer)
    }, 500)
  },
  methods: {
    pageHeightFun() {
      let headerHeight = 0
      let footerHeight = 0
      this.$nextTick(() => {
        if (this.$refs.header && this.$refs.header.clientHeight) {
          headerHeight = this.$refs.header.clientHeight
        } else {
          uni.createSelectorQuery().in(this).select("#header").boundingClientRect((data) => {
            if (data) {
              headerHeight = data.height
            }
          }).exec();
        }
        if (this.$refs.footer && this.$refs.footer) {
          footerHeight = this.$refs.footer.clientHeight
          this.mainHeight = headerHeight + footerHeight
          clearInterval(this.timer)
        } else {
          uni.createSelectorQuery().in(this).select("#footer").boundingClientRect((data) => {
            if (data) {
              footerHeight = data.height
              this.mainHeight = headerHeight + footerHeight
              clearInterval(this.timer)
            }
          }).exec();
        }
      })
    },
    menuButtonInfo() {
      let menuButtonInfo = 0;
      let titleBarHeight = 0;
      let statusBarHeight = 0;
      let safeAreaInsetsBottom = 0;
      let top = 0;
      let res = uni.getWindowInfo();
      try {
        menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        statusBarHeight = res.statusBarHeight || menuButtonInfo.top;
        safeAreaInsetsBottom = res.screenHeight - res.safeArea.height - res.statusBarHeight;
        statusBarWidth = menuButtonInfo.width;
        titleBarHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 + menuButtonInfo.height;
      } catch (error) { }
      let data = {
        statusBarHeight: statusBarHeight,
        safeAreaTop: res.safeArea.top,
        titleBarHeight: titleBarHeight,
        top: statusBarHeight + titleBarHeight,
        bottom: safeAreaInsetsBottom,
        topBottom: top + safeAreaInsetsBottom,
      };
      return data;
    },
  },
};
</script>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.elementLayOut {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}
.element-main {
    opacity: 1;
}
</style>

